<template>
	<view>
		<!-- 老人信息 -->
<!-- 		<view class="elder-data">
			<view>姓名：杨运英</view>
			<view>身份证号：123456009988771234</view>
		</view> -->
		<view class="health-container">
			<view class="health-card" :style="norm">
				<image src="./images/hb-norm.png" alt="" /></image>
				<text>心跳:<text class="health-num">72</text>次/分</text>
			</view>
			<view class="health-card" :style="warn">
				<image src="./images/temp-warn.png" alt="" /></image>
				<text>体温:<text class="health-num">37.0</text>&#8451;</text>
			</view>
			<view class="health-card" :style="norm">
				<image src="./images/bpres-norm.png" alt="" /></image>
				<text>血压:<text class="health-num">14</text>kPa</text>
			</view>
			<view class="health-card" :style="danger">
				<image src="./images/oxy-danger.png" alt="" /></image>
				<text>血氧:<text class="health-num">92</text>%</text>
			</view>
			<view class="health-list">
				<view class="health-list-item">
					<text>脉搏:</text>
					<text>78 次/分</text>
				</view>
				<view class="health-list-item">
					<text>呼吸:</text>
					<text>16 次/分</text>
				</view>
				<view class="health-list-item">
					<text>血糖:</text>
					<text>6.7 mmol/L</text>
				</view>
				<view class="health-list-item">
					<text>血脂:</text>
					<text>4.6 mmol/L</text>
				</view>
				<view class="health-list-item">
					<text>其他指标1:</text>
					<text>16 次/分</text>
				</view>
			</view>
			<view class="elder-location">
				<view class="elder-location-text">
					<uni-icons type="location-filled" size="16px" color="#4964af"></uni-icons>
					<text>老人位置: 厦门市高崎机场T2航站楼</text>
				</view>
				<map class="map-area" latitude="24.539473" longitude="118.137053" :scale="13" show-location="true"
					style="width: 100%;height: 500rpx;z-index: 10;" @click="handleToMap"></map>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				danger: {
					// "borderColor": "red",
					"color": "red",
					"font-weight": "bold",
					"backgroundColor": "#f5c2c8",
				},
				warn: {
					// "borderColor": "orange",
					"color": "#f08300",
					"font-weight": "bold",
					"backgroundColor": "#fcdab8",
				},
				norm: {
					// "borderColor": "green",
					"color": "green",
					"font-weight": "bold",
					"backgroundColor": "#ddf2da",

				}
			}
		},
		methods: {
			handleToMap() {
				uni.navigateTo({
					url: '/pages/homepage/TencentMap/index'
				})
			}

		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #f8f8f8;
	}

	.elder-data {
		margin: 10px 10px 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #666;
	}

	.health-container {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-content: space-between;
		margin: 70rpx;
		margin-top: 35rpx;
	}

	.health-card {
		width: 260rpx;
		height: 260rpx;
		font-size: 16px;
		margin-bottom: 50rpx;
		background-color: #fff;
		border-radius: 15px;
		text-align: center;
		box-shadow: 2px 2px 4px 1px rgba(0, 0, 0, 0.1);

		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
	}
	
	image {
		width: 150rpx;
		height: 150rpx;
	}
	
	.health-list {
		width: 610rpx;
		margin-bottom: 50rpx;
		border-radius: 10px;	
		padding: 5px 10px;
		background-color: #fff;
		box-shadow: 2px 2px 4px 1px rgba(0, 0, 0, 0.1);
	}
	
	.health-list-item {
		width: 100%;
		display: flex;
		justify-content: space-between;
		font-size: 18px;
		color: #666;
		line-height: 2.2;
		border-bottom: 1px solid #eee;
	}
	
	.health-list-item:last-of-type {
		border-bottom: none;
	}

	.health-num {
		font-size: 22px;
		margin: 0 3px;
	}
	
	.elder-location {
		width: 100%;
		border: 2px solid #f1f1f1;
		border-radius: 5px;
		box-shadow: 2px 2px 4px 1px rgba(0, 0, 0, 0.1);
	}

	.elder-location-text {
		width: 100%;
		padding: 10px;
		padding-left: 5px;
		background-color: #fefefe;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
		color: #555;
		font-size: 16px;
		line-height: 1.4;
	}
</style>